<template>
  <div class="page-hero" v-if="hero">
    <div class="topbar bg-black text-white py-2 px-3 d-flex ai-center">
      <img src="../assets/logo.png" height="30">
      <div class="pl-2">王者荣耀</div>
      <div class="flex-1 pl-2">攻略站</div>
      <router-link to="/heroList" tag="span">更多英雄 &gt;</router-link>
    </div>
    <div class="info_bg">
      <img :src="herobg">
      <div class="hero-attribute text-white w-100 fs-12 p-3">
        <div class="mb-2">{{hero.title}}</div>
        <h3 class="mb-1" style="font-size:17px;">{{hero.name}}</h3>
        <div class="mb-2">{{hero.heroType && hero.heroType.map(v=>v.name).join(' / ')}}</div>
        <div class="d-flex">
          <div v-for="(item, i) in hero.scores" :key="i">
            <span class="mr-1">{{i | ctitle()}}</span>
            <span :class="`bodge bg-${i} mr-2 text-center`">{{item}}</span>
          </div>
          <router-link :to="`/skins/${id}`" tag="div" class="text-grey fs-12 flex-1 text-right">皮肤：{{hero.skinName && hero.skinName.length}} &gt;</router-link>
        </div>
      </div>
    </div>
    <div class="bg-white p-3">
      <router-link :to="`/herodetail/${id}`" tag="div" class="img1 mb-3">一图识英雄</router-link>
      <div class="d-flex jc-around mb-3">
        <div class="skill" v-for="(skill, index) in hero.skills" :key="index">
          <img class="w-100" :src="skill.icon" :class="skillActiveIdx === index ? 'skillActive' : ''" @click="()=>{skillActiveIdx=index,$refs.skills.swiper.slideTo(index)}">
        </div>
      </div>
      <swiper ref="skills" :options="{autoHeight: true}" @slideChangeTransitionEnd="() => skillActiveIdx = $refs.skills.swiper.activeIndex">
        <swiper-slide v-for="(item, index) in hero.skills" :key="index">
          <h3 style="float:left;">{{item.name}}</h3>
          <span class="text-tip pl-3 fs-12">(冷却值：{{item.cd}} 消耗：{{item.blue}})</span>
          <p style="color:#343440;">{{item.description}}</p>
          <p class="tip text-tip">小提示：{{item.tip}}</p>
        </swiper-slide>
      </swiper>
    </div>
    <card icon="tips" title="加点建议" :plain="true" v-if="hero.point">
      <div class="d-flex jc-between text-center tip pb-3">
        <div style="width:22%" v-for="(item, index) in hero.point.skill" :key="index">
          <p class="fs-14">{{index | ctitle()}}</p>
          <img class="w-100 px-2" :src="hero.skills[item].icon">
          <span>{{hero.skills[item].name}}</span>
        </div>
        <div style="width:44%">
          <p class="fs-14">召唤师技能</p>
          <div class="d-flex">
            <div style="width:50%" v-for="item in hero.point.summoner" :key="item._id">
              <img class="w-100 px-2" style="border-radius:50%;" :src="item.summoner_icon">
              <span>{{item.summoner_name}}</span>
            </div>
          </div>
        </div>
      </div>
    </card>
    <card icon="tips" title="出装推荐" :plain="true">
      <div v-if="hero.items1">
        <p>顺风出装</p>
        <div class="d-flex jc-between">
          <div style="flex:15%" class="d-flex flex-column ai-center" v-for="item in hero.items1.items" :key="item._id">
            <img :src="item.icon" style="width:80%;border-radius:50%">
            <span class="pt-2 fs-12 ellipse">{{item.name}}</span>
          </div>
        </div>
        <p class="tip text-tip">小提示：{{hero.items1.tip}}</p>
      </div>
      <div v-if="hero.items2">
        <p>逆风出装</p>
        <div class="d-flex jc-between">
          <div style="flex:15%" class="d-flex flex-column ai-center" v-for="item in hero.items2.items" :key="item._id">
            <img :src="item.icon" style="width:80%;border-radius:50%">
            <span class="pt-2 fs-12 ellipse">{{item.name}}</span>
          </div>
        </div>
        <p class="tip text-tip">小提示：{{hero.items2.tip}}</p>
      </div>
    </card>
    <card icon="tips" title="铭文推荐" :plain="true">
      <div class="d-flex jc-between">
        <div class="d-flex flex-column ai-center" v-for="(item, index) in hero.mings" :key="index">
          <img :src="`https://game.gtimg.cn/images/yxzj/img201606/mingwen/${item.ming_id}.png`">
          <span class="pt-2 fs-14">{{item.ming_name}}</span>
          <div class="ming_des fs-12" v-html="item.ming_des"></div>
        </div>
      </div>
    </card>
    <card icon="tips" title="使用技巧" :plain="true">
      <p class="tip">{{hero.usageTips}}</p>
    </card>
    <card icon="tips" title="对抗技巧" :plain="true">
      <p class="tip">{{hero.battleTips}}</p>
    </card>
    <card icon="tips" title="团战思路" :plain="true">
      <p class="tip">{{hero.teamTips}}</p>
    </card>
    <card icon="tips" title="英雄关系" :plain="true">
      <div v-for="(item, index) in hero.related" :key="index">
        <p class="fs-14">{{index | ctitle()}}</p>
        <div class="d-flex mb-2" v-for="h in item" :key="h._id">
          <div style="width:48px;"><img class="w-100" :src="h.name.avatar"></div>
          <p class="tip mt-1 pl-3 flex-1">{{h.description}}</p>
        </div>
      </div>
    </card>
  </div>
</template>
<script>
import Card from '../components/Card'

export default {
  filters: {
    ctitle (val) {
      switch (val) {
        case 'difficult':
          return '难度'
        case 'skill':
          return '技能'
        case 'attack':
          return '攻击'
        case 'survive':
          return '生存'
        case 'partners':
          return '最佳搭档'
        case 'weak':
          return '被谁克制'
        case 'strong':
          return '克制谁'
        case 0:
          return '主升'
        case 1:
          return '副升'
        default:
          return false
      }
    }
  },
  components: {
    Card
  },
  props: {
    id: { required: true }
  },
  data () {
    return {
      herobg: `https://game.gtimg.cn/images/yxzj/img201606/skin/hero-info/${this.id}/${this.id}-bigskin-1.jpg`,
      hero: {},
      skillActiveIdx: 0
    }
  },
  methods: {
    async getHero () {
      const { data: res } = await this.$http.get(`/heroes/${this.id}`)
      this.hero = res
    }
  },
  created () {
    this.getHero()
  }
}
</script>

<style lang="less" scoped>
.topbar {
  position: sticky;
  top: 0;
  z-index: 999;
}
.info_bg {
  width: 100%;
  position: relative;
  img {
    width: 100%;
  }
  &::after {
     content: '';
     display: block;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     background: url('https://game.gtimg.cn/images/yxzj/m/m201706/images/herodetail/bt.png');
     background-size: contain;
  }
  .hero-attribute {
    position: absolute;
    bottom: 0;
    z-index: 1;
    .bodge {
      display: inline-block;
      width: 1.1rem;
      height: 1.1rem;
      border-radius: 50%;
    }
  }
}
.img1 {
  color: #343440;
  padding-left: 20%;
  width: 50%;
  line-height: 3rem;
  border: 1px solid #eceef0;
  border-radius: 5px;
  background: url('https://game.gtimg.cn/images/yxzj/m/m201706/images/herodetail/icon_07.png') #fcfcfc no-repeat 20% center;
  background-size: 1.38rem;
}
.skill {
  width: 18%;
  height: 0;
  padding-bottom: 20%;
  position: relative;
}
.skillActive {
  border: 3px solid #d59b40;
  border-radius: 50%;
}
.card {
  /deep/.sprite-tips {
    width: 1rem;
    height: 1rem;
    background-position: 0.138% 62.783%;
  }
  .card-body > div {
    border-bottom: 1px solid #d4d9de;
    &:nth-last-child(1) {
      border: 0;
    }
  }
  .tip {
    color: #343440;
    line-height: 1.4rem;
  }
}
</style>
